import { drawColorMap, getColorMap } from '@app-nextmesh/utils';
import { CSSProperties, useEffect, useRef } from 'react';

export function ColorBar({
  name,
  style,
}: {
  name: string;
  style?: CSSProperties;
}) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    if (canvasRef.current) {
      const n = 20;
      const colorMap = getColorMap(name, n);
      drawColorMap(colorMap, colorMap.length, canvasRef.current);
    }
  }, [canvasRef.current, name]);
  return (
    <canvas
      ref={canvasRef}
      style={style}
    />
  );
}
